<!--Rate-Company 各保司出单量占比-->
<template>
    <section class="section">
        <div class="section__title">各保司出单量占比</div>
        <div class="chart-box">
            <ul>
                <li v-for="(item, index) in useData.slice(0,splicLengh)" 
                    :key="index"
                    :style="`border-color: ${item.color}`"
                >
                    <span>{{ item.name }}</span>
                    <span style="font-size:1.5rem;">{{ (item.value *100).toFixed(2)}}%</span>
                </li>
            </ul>
            <div ref="chartDom" class="chart"></div>           
            <ul>
                <li v-for="(item, index) in useData.slice(-(useData.length-splicLengh))" 
                    :key="index"
                    :style="`border-color: ${item.color}`"
                >
                    <span>{{ item.name }}</span>
                    <span style="font-size:1.5rem;">{{ (item.value *100).toFixed(2)}}%</span>
                </li>
                <li v-if="splicLengh - (useData.length - splicLengh) > 0">
                    &nbsp;
                </li>
            </ul>
        </div>
    </section>

</template>

<script setup>
import {onMounted, ref,computed,onUnmounted,watch,onBeforeUnmount} from "vue"
import * as echarts from 'echarts'

const chartDom = ref(null)
let myChart=null
const chartOption=ref(null)


const colors = [
  "#3ab8ff", // Sky Blue
  "#50d5ff", // Aqua Blue
  "#6cf2ff", // Light Cyan
  "#8cffff", // Ice Blue
  "#7d87ff", // Soft Indigo
  "#a48dff", // Periwinkle
  "#92e5a8", // Mint Green
  "#73ffbb", // Light Emerald
  "#49fcd4", // Aqua Green
  "#a0f0ff"  // Pale Blue
]


const data=ref([
    {title:'XX公司1',value:Math.round(Math.random()*100)},
    {title:'XX公司2',value:Math.round(Math.random()*100)},
    {title:'XX公司3',value:Math.round(Math.random()*100)},
    {title:'XX公司4',value:Math.round(Math.random()*100)},
    {title:'XX公司5',value:Math.round(Math.random()*100)},
    {title:'XX公司6',value:Math.round(Math.random()*100)},
    {title:'XX公司7',value:Math.round(Math.random()*100)},
    {title:'XX公司8',value:Math.round(Math.random()*100)},
    {title:'其他XX公司',value:Math.round(Math.random()*100)},
])

const sum = computed(() => {
  return data.value.reduce((acc, current) => acc + current.value, 0);
});
  
const useData = computed(() => {
  // console.log(sum.value)
 // 先排序再分配颜色
    return [...data.value] // 创建副本避免修改原始数据
        .sort((a, b) => b.value - a.value) // 先排序
        .map((item, sortedIndex) => ({ // sortedIndex是排序后的新索引
            name: item.title,
            value: Number(item.value / sum.value) ,
            color: colors[sortedIndex % colors.length], // 按排序后位置取颜色
            originalValue: item.value // 保留原始值用于显示
        }))
})


const splicLengh=computed(()=>{
    return Math.ceil(useData.value.length / 2)
})

const rosePieOption=(title,data)=>({
  // backgroundColor: '#000',
  series: [
    {
      name: '3D Rose Chart',
      type: 'pie',
      radius:'90%',
      center: ['50%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 0,
        shadowBlur: 15,
        shadowOffsetX: 3,
        shadowOffsetY: 5,
        shadowColor: 'rgba(0, 0, 0, 0.6)'
      },
      label: {
        show: false
      },
      data
    }
  ]
})

const updateRosePieOption=()=>{
  // console.log(useData.value)
  const roseData=useData.value.map(item=>({
    value:item.originalValue,
    name:item.name,
    itemStyle:{color:item.color}
  }))

  chartOption.value = rosePieOption('', roseData)

  if (chartDom.value) {
    myChart = echarts.init(chartDom.value); 
    myChart.setOption(chartOption.value);
  }

  
}
// 初始化图表
onMounted(() => {
  if (chartDom.value) {
    myChart = echarts.init(chartDom.value);
  
    updateRosePieOption()
    
    const observer = new ResizeObserver(() => {
      myChart?.resize();
    });
    observer.observe(chartDom.value);

    onBeforeUnmount(() => {
      observer.disconnect(); // 停止监听
      myChart?.dispose();
    });
  }

});

</script>


<style lang="scss" scoped>
@import "../../assets/style/main.scss";
$color-border:#494949;

.section{
    margin-top: .7rem;
}
.chart-box{ 
    position: relative; 
    width: 100%;
    height: 16.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    background-color: rgba(0,0,0,0.2);
    ul{             
      width: 24%;
      height: 85%; 
      display: flex;
      flex-direction: column;
      justify-content:space-evenly;
      margin-left:1.2rem;
      &:nth-last-child(1){
        margin-left: 0;
        margin-right:3.4rem;
      }        
      li{
        display: flex;
        justify-content: space-between;  
        align-items: flex-end;
        font-size:.8rem; 
        letter-spacing: 1.5px;   
        border-bottom: 1.5px solid transparent; //初始化线条颜色为透明
        color: #ffffff;
      }
    }
    .chart{
        //图表位置
        position: absolute;
        top: 50%;
        left: 45%;
        transform: translate(-50%,-50%);     
        width: 100%;
        height: inherit; 
        padding: 0;
        margin: 0;
    }
}
</style>